<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 310px;
            height: 260px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        #scroll {
            width: 310px;
            height: 220px;
            border: 1px solid #000;
            position: relative;
        }

        #scroll_mian {
            width: 620px;
            height: 220px;
        }

        .img {
            position: absolute;
            width: 310px;
            height: 220px;
            top: 0;
            left: 0;
        }

        .img img {
            width: 100%;
            height: 100%;
        }

        #span {
            text-align: center;
        }

        .pre, .next {
            width: 20px;
            height: 40px;
            font-size: 40px;
            color: white;
            position: absolute;
            top: 100px;
        }

        .pre {
            left: 0;
        }

        .next {
            right: 0;
        }

        #span .icon {
            width: 24px;
            height: 10px;
            display: inline-block;
            background: url("images/icon.png") no-repeat -24px -790px;
            margin: 10px;
            text-indent: 20em;
        }

        #span .current {
            background-position: 0px -770px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="scroll">
        <div id="scroll_mian">
            <div class="img">
                <img src="images/1.jpeg"/>
            </div>
            <div class="img">
                <img src="images/2.jpeg"/>
            </div>
            <div class="img">
                <img src="images/3.jpeg"/>
            </div>
            <div class="img">
                <img src="images/4.jpeg"/>
            </div>
            <div class="img">
                <img src="images/5.jpeg"/>
            </div>
            <div class="img">
                <img src="images/6.jpeg"/>
            </div>
        </div>
    </div>
    <div id="span">
        <span class="pre">&lt;</span>
        <span class="next">&gt;</span>
        <!--<span class="icon current"></span>-->
    </div>
</div>
</body>
<script src="../base.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var box = document.getElementById('box');
        var span = document.getElementById('span');
        var scroll_mian = document.getElementById('scroll_mian');
        var imgs = scroll_mian.children;
        var imgWidth = box.offsetWidth;
        var isNow = 0;//定义图片的索引

        for (var i = 0; i < imgs.length; i++) {
            var mySpan = document.createElement('span');
//            span.appendChild(mySpan);
            span.insertBefore(mySpan,span.children[2]);
            //给每个小圆点icon绑定一个索引值
            mySpan.innerHTML = imgs.length - i;//索引从0开始
            mySpan.className = 'icon';
        }
        span.children[2].className = 'icon current';

        //遍历取出除了第一张图片外的每一张图片
        for (var i = 1; i < imgs.length; i++) {
            //把取出的图片排在第一张图片的后面
            imgs[i].style.left = imgWidth + 'px';
        }
        //点击span让图片移动，span包括了pre、next、和六个小圆点
        for (var i = 0; i < span.children.length; i++) {
            var myspan = span.children[i];
            myspan.onclick = function () {
                //根据类名判断点击了那个span
                if (this.className == 'pre') {//点击左边，图片右移

                    buffer(imgs[isNow], {left: imgWidth});//让当前图片右移出去
                    //让下一张图片快速移动到左边，这时候点击才能右移
                    isNow--;
                    if (isNow < 0) {
                        isNow = imgs.length - 1;
                    }
                    imgs[isNow].style.left = -imgWidth + 'px';
                    //让那个已经移到左边的图片出现
                    buffer(imgs[isNow], {left: 0})
                }
                else if (this.className == 'next') {//点击右边，图片左移
                    buffer(imgs[isNow], {left: -imgWidth});//让当前的图片左移出去
                    //让下一张图片快速移动到右边，这时候点击才能左移
                    isNow++;
                    if (isNow > imgs.length - 1) {
                        isNow = 0;
                    }
                    imgs[isNow].style.left = imgWidth + 'px';
                    //让这张已经移动到右边的图片出现
                    buffer(imgs[isNow], {left: 0})
                }
                else {
                    //this.className == 'icon'
                    //获取点击的span的索引，要和当前图片比较
                    //索引要在创建span的时候绑定一个索引
                    var index = this.innerHTML - 1;
                    //判断
                    if (index > isNow) {//右边
                        //让图片左移
                        buffer(imgs[isNow], {left: -imgWidth});
                        //让索引值对应右移
                        isNow = index;
                        imgs[index].style.left = imgWidth + 'px';
                        buffer(imgs[isNow], {left: 0});
                    } else if (index < isNow) {//点击的是左
                        //让图片右移
                        buffer(imgs[isNow], {left: imgWidth});
                        isNow = index;
                        imgs[index].style.left = -imgWidth + 'px';
                        buffer(imgs[isNow], {left: 0});
                    }

                }
                changeIndex();
            }
        }
        function changeIndex(indx) {
            //当前颜色排他
            for (var i = 2; i < span.children.length; i++) {//不能减一，span.children.length=8，所以不减的话能取到7，小圆点就是2-7六个icon

                span.children[i].className = 'icon';
            }
            console.log(span.children.length);
            span.children[isNow + 2].className = 'icon current'
        }

        var timer = setInterval(autoPlay, 1000);

        function autoPlay() {
            buffer(imgs[isNow], {left: -imgWidth});
            isNow++;
            if (isNow > imgs.length - 1) {
                isNow = 0;
            }
            //让下一张图片快递定位到右边
            imgs[isNow].style.left = imgWidth + 'px';
            //让下一张图片定位到当前位置
            buffer(imgs[isNow], {left: 0});
            changeIndex();
        }

        //5.当移动到box,停止定时器,离开就开启定时器
        box.onmouseover = function () {
            clearInterval(timer);
        };
        box.onmouseout = function () {
            timer = setInterval(autoPlay, 1000);
        }

    }
</script>
</html>
